<template>
  <div style="width: 100%">
    <slot name="dialogSlot">
      <el-input
        v-model="inputValue"
        class="input-with-select"
        clearable
        :disabled="disabledSel"
        placeholder="请选择"
        readonly
        @clear="clearInput"
      >
        <template #suffix>
          <vab-icon icon="close-circle-line" @click="clearInput" />
        </template>
        <template #append>
          <el-button :icon="Search" @click="handleShow" />
        </template>
      </el-input>
    </slot>
  </div>
  <vab-dialog
    v-model="dialogFormVisible"
    :append-to-body="appendToBodyVal"
    :before-close="handleClose"
    :close-on-click-modal="true"
    show-fullscreen
    :title="titleRef"
    :width="width"
  >
    <div>
      <el-row>
        <el-col :span="12">
          <el-card shadow="hover">
            <div class="grid-content bg-purple">
              <CommonSearch
                ref="unSearchRef"
                v-model="unQueryFormRef"
                v-model:isLoading="unTableDataRef.isLoading"
                :search-data="unSearchDataRef"
                @fetched-data="fetchUnSelectListData"
              />
              <CommonTableV2
                v-model="unTableDataRef.datalist"
                v-model:isLoading="unTableDataRef.isLoading"
                v-model:query-form="unQueryFormRef"
                v-model:select-valule="selectValue"
                v-model:selection-values="unSearchDataRef.selectionIds"
                :table-data="unTableDataRef"
              >
                <template #opreration>
                  <vxe-column fixed="right" title="操作" width="120">
                    <template #default="{ row }">
                      <el-button size="small" type="primary" @click="onHandleInSelect(row)"> 选择 </el-button>
                    </template>
                  </vxe-column>
                </template>
              </CommonTableV2>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover">
            <div class="grid-content bg-purple-light">
              <CommonSearch
                ref="inSearchRef"
                v-model="inQueryFormRef"
                v-model:isLoading="inTableDataRef.isLoading"
                :search-data="inSearchDataRef"
                @fetched-data="fetchInSelectListData"
              />
              <CommonTableV2
                v-model="inTableDataRef.datalist"
                v-model:isLoading="inTableDataRef.isLoading"
                v-model:query-form="inQueryFormRef"
                v-model:select-valule="selectValue"
                v-model:selection-values="inSearchDataRef.selectionIds"
                :table-data="inTableDataRef"
              >
                <template #opreration>
                  <vxe-column fixed="right" title="操作" width="120">
                    <template #default="{ row }">
                      <el-button size="small" type="primary" @click="onHandleUnSelect(row)"> 移除 </el-button>
                    </template>
                  </vxe-column>
                </template>
              </CommonTableV2>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <template #footer>
      <div style="position: relative; padding-right: 15px; text-align: right">
        <el-button :loading="confirmLoading" type="success" @click="handleConfirm"> 确认 </el-button>
        <el-button type="info" @click="handleClose">关闭</el-button>
      </div>
    </template>
  </vab-dialog>
</template>

<script>
import VabDialog from "@/plugins/VabDialog/index.vue";
import { Search } from "@element-plus/icons-vue";
import { postRequest, backTableHeight } from "@/api/mains";
import CommonTableV2 from "@/plugins/tableV2/CommonTableV2.vue";
import CommonSearch from "@/plugins/search/CommonSearch.vue";
import { failMsg } from "@/utils/MessageUtils";

export default {
  name: "DialogListManyStatic",
  components: { VabDialog, CommonTableV2, CommonSearch },
  props: {
    modelValue: {
      type: Array,
      default: () => {
        return [];
      }
    },
    appendToBody: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: "请选择"
    },
    data: {
      type: Array,
      default: () => {
        return [];
      }
    },
    placeholder: {
      type: String,
      default: () => {
        return "请选择";
      }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: "50%"
    },
    showField: {
      type: String,
      default: "name"
    },
    showValue: {
      type: String,
      default: ""
    },
    inSearchData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    unSearchData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    inTableData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    unTableData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    queryForm: {
      type: Object,
      default: () => {
        return {};
      }
    },
    rowIndex: {
      type: Number,
      default: 0
    }
  },
  emits: {
    "callback-select": null,
    "update:model-value": null,
    "update:show-value": null
  },
  setup(props, { emit }) {
    const confirmLoading = ref(false);

    const disabledSel = ref(props.disabled);
    const showFieldRef = ref(props.showField);
    const selectValue = ref(props.modelValue);
    const rowIndexRef = ref(props.rowIndex);
    const inputValue = ref(props.showValue);

    const titleRef = ref(props.title);
    const dialogFormVisible = ref();

    const unQueryFormRef = ref(props.queryForm);
    unQueryFormRef.value.pageNum = 1;
    unQueryFormRef.value.pageSize = 10;

    const unTableDataRef = reactive(props.unTableData);
    unTableDataRef.maxHeight = backTableHeight() - 100;
    const unSearchDataRef = reactive(props.unSearchData);
    unSearchDataRef.customFetch = true;

    const inQueryFormRef = ref({});
    inQueryFormRef.value.pageNum = 1;
    inQueryFormRef.value.pageSize = 10;

    const inTableDataRef = reactive(props.inTableData);
    inTableDataRef.maxHeight = backTableHeight() - 100;
    const inSearchDataRef = reactive(props.inSearchData);
    inSearchDataRef.customFetch = true;

    const appendToBodyVal = ref(props.appendToBody);

    const handleShow = () => {
      if (!disabledSel.value) {
        dialogFormVisible.value = true;
        fetchUnSelectListData();
        inTableDataRef.datalist = [];
      }
    };
    const handleClose = () => {
      dialogFormVisible.value = false;
    };

    const clearInput = () => {
      if (!disabledSel.value) {
        inputValue.value = "";
        selectValue.value = "";
        emit("update:model-value", []);
        emit("update:show-value", "");
        emit("callback-select", []);
      }
    };

    const fetchUnSelectListData = () => {
      unTableDataRef.isLoading = true;
      postRequest(unSearchDataRef.queryUrl, unQueryFormRef.value).then(res => {
        unTableDataRef.isLoading = false;
        const { data } = res;
        unTableDataRef.datalist = data.rows;
        unTableDataRef.total = data.total;
      });
    };

    const fetchInSelectListData = () => {
      unTableDataRef.isLoading = true;
      postRequest(inSearchDataRef.queryUrl, inQueryFormRef.value).then(res => {
        unTableDataRef.isLoading = false;
        const { data } = res;
        unTableDataRef.datalist = data.rows;
        unTableDataRef.total = data.total;
      });
    };

    const onHandleInSelect = row => {
      inputValue.value = row[showFieldRef.value];
      selectValue.value = row.id;

      let exitRow = false;
      inTableDataRef.datalist.forEach(item => {
        if (row.id == item.id) {
          exitRow = true;
          return;
        }
      });
      if (exitRow) {
        failMsg("已选择当前记录");
      } else {
        inTableDataRef.datalist.push(row);
      }
    };

    const onHandleUnSelect = row => {
      inputValue.value = row[showFieldRef.value];
      selectValue.value = row.id;

      inTableDataRef.datalist.forEach((item, index) => {
        if (row.id == item.id) {
          inTableDataRef.datalist.splice(index, 1);
          return;
        }
      });
    };

    const handleConfirm = () => {
      const modelArr = [];
      const showArr = [];
      inTableDataRef.datalist.forEach(item => {
        modelArr.push(item.id);
        showArr.push(item[props.showField]);
      });
      emit("update:model-value", modelArr);
      emit("update:show-value", showArr.join(","));
      emit("callback-select", inTableDataRef.datalist);
      handleClose();
    };

    onMounted(() => {
      /*  if (!unTableDataRef.isInitData) {
          fetchUnSelectListData()
        } */
    });

    watch(
      () => props.showValue,
      newVal => {
        inputValue.value = newVal;
      }
    );

    return {
      disabledSel,
      showFieldRef,
      selectValue,
      rowIndexRef,
      inputValue,
      titleRef,
      dialogFormVisible,
      handleShow,
      handleClose,
      clearInput,
      fetchUnSelectListData,
      fetchInSelectListData,
      unQueryFormRef,
      unTableDataRef,
      unSearchDataRef,
      inQueryFormRef,
      inTableDataRef,
      inSearchDataRef,
      appendToBodyVal,
      onHandleInSelect,
      onHandleUnSelect,
      Search,
      confirmLoading,
      handleConfirm
    };
  }
};
</script>

<style lang="scss" scoped>
:deep(.vxe-table--body) {
  .vxe-body--column {
    background-image: none;
  }
}
:deep(.vxe-table) {
  .vxe-table--border-line {
    border: none;
  }
}
:deep(.el-dialog) {
  .el-dialog__body {
    padding-top: 10px;
    padding-bottom: 0;
  }
}

// :deep(.el-dialog) {
//   .el-dialog__footer {
//     padding-bottom: 0px;
//   }
// }
:deep(.el-card) {
  .el-card__body {
    padding-bottom: 0;
  }
}
:deep(.el-dialog) {
  .el-card {
    margin-bottom: 0;
  }
}
.el-col-12 {
  max-width: 49%;
  margin: 0 0.5%;
}
</style>
